<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <title>创作博客</title>
    <link rel="shortcut icon" href="/img/favicon.ico"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/common/layuimini/layuimini.css">
    <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
    <link rel="stylesheet" href="/common/layuimini/default.css">
    <link rel="stylesheet" href="/common/layuimini/public.css" media="all">
    <link rel="stylesheet" href="/editor/css/editor-style.css"/>
    <link rel="stylesheet" href="/editor/css/editormd.css"/>
    <link rel="stylesheet" href="/editor/lib/codemirror/codemirror.min.css"/>
    <style type="text/css">
        /*.layui-input {width: 1000px !important;}*/
        .write-article-btn{border-radius: 15px;}
    </style>
</head>
<body>
<br>
<br>
    <input id="articleId" type="text" th:value="${articleId}">
    <input id="articleTitle" type="text">
    <div class="layui-form" style="width: 70%;margin: 0 auto;">
<!--        <div class="layui-form-item">-->
<!--            <h1>请创作您的博客</h1>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">标题</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" id="articleTitle" name="title" autocomplete="off" placeholder="请输入博客标题" class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">分类</label>-->
<!--            <div class="layui-input-block">-->
<!--                <div id="articleCategory" class="xm-select-demo"></div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-btn-container">-->
<!--            <button onclick="issuedArticle()" class="layui-btn layui-btn-primary layui-border-blue write-article-btn">发布</button>-->
<!--            <button id="articleSaveBtn" onclick="saveArticle()" class="layui-btn layui-btn-primary layui-border-green write-article-btn">保存至草稿箱</button>-->
<!--        </div>-->
    </div>
    <div id="layout">
        <div id="writeBlogEditor">
            <textarea id="articleContent" style="display:none;"></textarea>
        </div>
    </div>
        <div class="layui-btn-container">
            <button id="articleSaveBtn" onclick="saveArticle()" class="layui-btn layui-btn-primary layui-border-green write-article-btn">保存草稿</button>
            <button onclick="releaseArticle()" class="layui-btn layui-btn-primary layui-border-blue write-article-btn">发布文章</button>
        </div>
<script src="/editor/js/jquery.min.js"></script>
<script src="/editor/editormd.min.js"></script>
<script src="/common/xm-select/xm-select.js"></script>
<script type="text/javascript" src="/common/layer/layer.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        var articleId = $("#articleId").val();
        if (articleId != ''){
            var data = getArticleData(articleId);
            //博客内容隐藏域赋值
            $("#articleContent").val(data.content);
            //博客标题隐藏域赋值
            $("#articleTitle").val(data.title);
        }
        var testEditor;
        $(function() {
            testEditor = editormd("writeBlogEditor", {
                width   : "90%",
                height  : 640,
                syncScrolling : "single",
                path    : "/editor/lib/"
            });
        });
        //默认标题是当前时间
        // initArticleTitle();

    });

    var articleCategory = xmSelect.render({
        el: '#articleCategory',
        // radio: true,
        // clickClose: true, //点击之后关闭
        tips: '请选择博客分类',
        theme: {
            color: '#0081ff',
        },

        data: getCategoryData()
    })

    function getArticleData(articleId){
        var result;
        $.ajax({
            url: "/article/getArticleData",
            type: "get",
            dataType: "json",
            async: false,
            data:{
                "articleId":articleId
            },
            success:function (res){
                if (res.state){
                    result = res.data;
                }
            }
        })
        return result;
    }


    /**
     * 页面初始化，给博客标题附上值
     * */
    function initArticleTitle(){
        var initTitle = $("#articleTitle").val();
        if (initTitle == '' ||　initTitle == undefined){
            var currentTime = getCurrentTime();
            $("#articleTitle").val(currentTime);
        }
    }
    /**
     * 获取当前时间
     * @returns {string}
     */
    function LocalTime(s) {
        return s < 10 ? '0' + s : s;
    }
    function getCurrentTime(){
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var now = year + '-' + LocalTime(month) + "-" + LocalTime(date);
        return now;
    }

    /**
     * 保存文章至草稿箱（未发布）
     */
    function saveArticle(){
        var article = $("#articleContent").val();
        if (article.length > 0){
            layer.open({
                type: 2,
                title: '',
                shadeClose: true,
                shade: false,
                // maxmin: true, //开启最大化最小化按钮
                area: ['50%', '270px'],
                move: false,
                content: '/article/write/saveToDraft'
            });
        }else {
            layer.msg('文章内容不能为空',{icon:0,time:800});
        }
    }

    /**
     * 发布博客
     */
    function releaseArticle(){
        var article = $("#articleContent").val();
        if (article.length > 0){
            layer.open({
                type: 2,
                title: '',
                shadeClose: true,
                shade: false,
                // maxmin: true, //开启最大化最小化按钮
                area: ['50%', '450px'],
                move: false,
                content: '/article/write/selectDetail'
            });
        }else {
            layer.msg('文章内容不能为空',{icon:0,time:800});
        }
    }

    /**
     * 获取博客分类下拉框数据
     */
    function getCategoryData(){
        var catagoryData;
        $.ajax({
            url: "/category/queryAllCategory",
            type: "post",
            async:false,//取消异步请求
            success: function (res){
                var data = res.data;
                var dataValue = new Array();
                for (var i = 0; i < data.length; i++) {
                    var array = data[i];
                    var obj = new Object();
                    obj.name = array.categoryName;
                    obj.value = array.id;
                    dataValue.push(obj);
                }
                console.log(dataValue)
                catagoryData = dataValue;
            }
        })
        return catagoryData;
    }
</script>
</body>
</html>
